<template>
  <!-- 搜索框 -->
  <wd-search
    v-model="input"
    placeholder-left
    placeholder="搜一搜：疾病/症状/医生"
    :focusWhenClear="true"
    @focus="focus"
    @clear="focus"
    @cancel="focus"
  />
  <!-- tabs切换 -->
  <wd-tabs v-model="tab">
    <block v-for="item in tabs" :key="item">
      <wd-tab :title="`${item}`" :name="item" inactiveColor="#1ec3a5">
        <view v-if="arr.length > 0" class="w-[100%]">
          <Card v-for="item in arr" :arr="item" />
        </view>
        <wd-status-tip v-else image="search" tip="当前搜索无结果" />
      </wd-tab>
    </block>
  </wd-tabs>
</template>

<script lang="ts" setup>
import DoctorAPI from "@/api/system/doctor";
import Card from "@/components/zhq-listItem/index.vue";
import { DoctorList } from "@/types/consult";

const tabs = ref(["医生", "疾病", "科普"]);
const tab = ref("例子");
const input = ref();
const arr = ref<DoctorList>([]);

function focus() {
  uni.navigateTo({ url: "/pages/AskDoctor/components/doctorSearch" });
}

onLoad(async (option) => {
  if (option) {
    input.value = option.input;
    const res = await DoctorAPI.searchDoctor(option.input);
    if (res !== undefined) {
      arr.value = res;
    }
  }
});
</script>

<style lang="scss" scoped>
.content {
  //   line-height: 120px;
  //   text-align: center;
  width: 600rpx;
  margin: 0 auto;
}

.tabContent_Title {
  font-size: 40rpx;
  font-weight: 600;
}

.tabContent_TitleTwo {
  font-size: 25rpx;
}
.tabContent_TitleThree_Box {
  margin-top: 30rpx;
}

.tabContent_TitleFour {
  margin: 0 auto;
  margin-top: 20rpx;
  margin-left: 240rpx;
  color: #34c8ad;
  text-align: center;
}

.Toggle {
  display: flex;
  justify-content: space-between;
  width: 600rpx;
  margin-top: 30rpx;

  .toggle_smallBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500rpx;
    font-size: 24rpx;
    .toggle_smallBox_Title {
      margin-top: 6rpx;
    }
    .line {
      width: 25rpx;
      height: 6rpx;
      margin-top: 20rpx;
      background: #16c2a3;
      border-radius: 11px;
    }
  }
}
:deep(.Toggle .toggle_smallBox[data-v-308a4d57]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.625rem;
  font-size: 0.75rem;
}
:deep(.wd-tabs__line[data-v-c72f40b5]) {
  position: absolute;
  bottom: 4px;
  left: 0;
  z-index: 1;
  width: var(--wot-tabs-nav-line-width, 19px);
  height: var(--wot-tabs-nav-line-height, 3px);
  background: var(--wot-tabs-nav-line-bg-color, var(--wot-color-theme, #16c2a3));
  border-radius: calc(var(--wot-tabs-nav-line-height, 3px) / 2);
}
</style>
